<!--
 * @Description  :
 * @Version      : 1.0
 * @Author       : seraph
 * @Date         : 2024-12-13 16:10:18
 * @LastEditors  : seraph
 * @LastEditTime : 2024-12-26 10:30:50
-->
<template>
  <h3>拖拽示例</h3>
  <div class="drag-container">
    <div class="draggable" draggable="true" @dragstart="handleDragStart" @contextmenu.prevent="resetPosition"
      @dragend="removeHighlight" ref="dragItem">
      拖拽我
    </div>
  </div>
  <div class="drop-zone" @dragover.prevent @drop="handleDrop" @dragleave="removeHighlight" @dragenter="addHighlight"
    ref="dropZone">
    放置区域
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// 引用拖拽元素和放置区域
const dragItem = ref<HTMLElement | null>(null)
const dropZone = ref<HTMLElement | null>(null)
const originalPosition = ref<{ top: string; left: string }>({ top: '0', left: '0' }) // 保存原始位置

// 拖拽开始时的处理函数
const handleDragStart = (event: DragEvent) => {
  dragItem.value = event.target as HTMLElement  // 保存被拖拽的元素
  event.dataTransfer?.setData('text/plain', '') // 必须设置数据以启用拖拽

  // 保存原始位置
  originalPosition.value.top = dragItem.value.style.top || '0';
  originalPosition.value.left = dragItem.value.style.left || '0';

  // 添加高亮样式
  dragItem.value.classList.add('highlight'); // 为被拖拽元素添加高亮样式
}

// 放置时的处理函数
const handleDrop = (event: DragEvent) => {
  if (!dragItem.value || !dropZone.value) return  // 确保拖拽元素和放置区域存在

  // 清空放置区域的提示文本
  dropZone.value.textContent = '';  // 移除放置区域内的文字提示

  // 将元素从原容器移动到放置区域
  dropZone.value.appendChild(dragItem.value)

  // 移除高亮样式
  dragItem.value.classList.remove('highlight'); // 移除被拖拽元素的高亮样式

  console.log('元素已成功放置')  // 控制台输出
}

// 右键点击复位元素位置的处理函数
const resetPosition = () => {
  if (dragItem.value) {
    // Check if dropZone exists before trying to remove the item
    if (dropZone.value && dropZone.value.contains(dragItem.value)) {
      dropZone.value.removeChild(dragItem.value); // 从放置区域移除元素
    }
    document.querySelector('.drag-container')?.appendChild(dragItem.value); // 重新添加到拖拽容器

    // 仅在复位时移除高亮样式
    dragItem.value.classList.remove('highlight'); // 移除被拖拽元素的高亮样式
  }
}

// 添加高亮样式
const addHighlight = () => {
  if (dropZone.value) {
    dropZone.value.classList.add('highlight'); // 添加高亮样式
  }
}

// 移除高亮样式
const removeHighlight = () => {
  if (dropZone.value) {
    dropZone.value.classList.remove('highlight'); // 移除放置区域的高亮样式
  }
  if (dragItem.value && dropZone.value && !dropZone.value.contains(dragItem.value)) {
    dragItem.value.classList.remove('highlight'); // 仅在元素不在放置区域时移除高亮样式
  }
}
</script>

<style scoped>
.drag-container {
  margin-bottom: 20px;
}

.draggable {
  width: 100px;
  height: 100px;
  background-color: #42b983;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  border-radius: 15px;
  position: relative;
}

.drop-zone {
  width: 300px;
  height: 300px;
  border: 2px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 15px;
}

.highlight {
  background-color: rgba(66, 185, 131, 0.3);
  border-color: #42b983;
}
</style>
